<template>
	<view class="page">
		<uni-popup type="center" ref="scoreEvaluation" :maskClick="false">
			<view class="score-wrap">
				<view class="tit">请为司机的服务打分</view>
				<uni-rate @change="handgChangRate" class="uni_rate" size="36" margin="6" value="1"></uni-rate>
				<textarea :placeholder-style="'color:#ccc'" class="textarea" v-model="reason" placeholder="请留下您对行程的评价" />
				<view class="btn" @click="handleSubmit">提交</view>
				<uni-icons @click="hide" class="close-icon" type="close" size="28" color="#ccc"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rate:	1,
				reason: ''
			};
		},
		methods: {
			show() {
				this.$refs.scoreEvaluation.open()
			},
			hide() {
				this.$refs.scoreEvaluation.close()
			},
			handgChangRate(rate) {
				this.rate = rate.value
			},
			handleSubmit() {
				this.$emit('confirm', {rate: this.rate, reason:this.reason})
				this.reason = ''
				this.hide()
			}
		}
	}
</script>

<style lang="scss" scoped>
.score-wrap {
	width: 580rpx;
	background-color: #fff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 69rpx 77rpx;
	box-sizing: border-box;
	.tit {
		font-size: 32rpx;
		margin-top: 20rpx;
		font-weight: 500;
	}
	.uni_rate {
		padding: 70rpx 0 40rpx;
	}
	.textarea {
		width: 426rpx;
		height: 228rpx;
		border-radius: 12rpx;
		border: 1px solid #ebebeb;
		padding: 20rpx 23rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		overflow: hidden;
		color: #ccc;
	}
	.btn {
		height: 63rpx;
		line-height: 63rpx;
		border-radius: 31rpx;
		width: 260rpx;
		margin: 44rpx auto 0;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		background-color: $yellow;
	}
	.close-icon {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		z-index: 2;
	}
}
</style>
